import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import 'package:wan_android_flutter/pages/search/search_page.dart';
import 'package:wan_android_flutter/routes/RouteUtils.dart';

import '../../common_ui/web/webview_page.dart';
import '../../common_ui/web/webview_widget.dart';
import '../../repository/datas/common_website_data.dart';
import '../../repository/datas/search_hot_keys_data.dart';
import '../../routes/routes.dart';
import 'hot_key_vm.dart';

class HotKeyPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HotKeyPageState();
  }
}

typedef WebsiteCallback = Function(String name, String link);

class _HotKeyPageState extends State<HotKeyPage> {
  HotKeyViewModel hotKeyViewModel = HotKeyViewModel();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    hotKeyViewModel.initData();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ChangeNotifierProvider<HotKeyViewModel>(
      create: (context) {
        return hotKeyViewModel;
      },
      child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
          children: [
            //标题
            Container(
              margin: EdgeInsets.only(top: 20.h),
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(width: 1.0, color: Colors.grey),
                  // 测试用明显颜色
                  bottom: BorderSide(width: 1.0, color: Colors.grey), // 测试用明显颜色
                ),
              ),
              padding: EdgeInsets.only(
                  left: 20.w, right: 20.w, top: 6.h, bottom: 6.h),
              height: 50.h,
              // 测试用固定高度
              child: Row(
                children: [
                  Text(
                    "搜索热词",
                    style: TextStyle(fontSize: 14.sp, color: Colors.black),
                  ),
                  Expanded(child: SizedBox()),
                  GestureDetector(
                    onTap: () {
                      RouteUtils.pushForNamed(context, RoutesPath.searchPage);
                    },
                    child: Image.asset(
                      "assets/images/icon_search.png",
                      width: 30.w,
                      height: 30.h,
                    ),
                  )
                ],
              ),
            ),
            //热点keys
            Consumer<HotKeyViewModel>(builder: (context, vm, child) {
              return _GridView(false, searchHotKeys: vm.searchHotKeys,
                  itemTap: (value) {
                RouteUtils.push(
                    context,
                    SearchPage(
                      keyWord: value,
                    ));
              });
            }),

            //标题
            Container(
                margin: EdgeInsets.only(top: 20.h),
                decoration: BoxDecoration(
                  border: Border(
                    top: BorderSide(width: 1.0, color: Colors.grey),
                    // 测试用明显颜色
                    bottom:
                        BorderSide(width: 1.0, color: Colors.grey), // 测试用明显颜色
                  ),
                ),
                padding: EdgeInsets.only(
                    left: 20.w, right: 20.w, top: 6.h, bottom: 6.h),
                height: 50.h,
                // 测试用固定高度
                child: Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "常用网站",
                    style: TextStyle(fontSize: 14.sp, color: Colors.black),
                  ),
                )),
            //常用网站
            Consumer<HotKeyViewModel>(builder: (context, vm, child) {
              return _GridView(true, websites: vm.commonWebsites,
                  websiteCallback: (name, link) {
                RouteUtils.push(
                    context,
                    WebViewPage(
                      loadResource: link,
                      webViewType: WebViewType.URL,
                      showTitle: true,
                      title: name,
                    ));
              });
            })
          ],
        )),
      ),
    );
  }

  Widget _GridView(bool isWebSite,
      {List<SearchHotKeysData>? searchHotKeys,
      List<CommonWebsiteData>? websites,
      ValueChanged<String>? itemTap,
      WebsiteCallback? websiteCallback}) {
    return Container(
      margin: EdgeInsets.only(top: 20.h),
      padding: EdgeInsets.symmetric(horizontal: 20.w),
      child: GridView.builder(
          shrinkWrap: true,
          //计算屏幕显示高度
          physics: NeverScrollableScrollPhysics(),
          //禁用listView滑动事件
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              //最大横轴范围
              maxCrossAxisExtent: 120.w,
              //主轴的间隔
              mainAxisSpacing: 8.r,
              //宽高比
              childAspectRatio: 3,
              //横轴的间隔
              crossAxisSpacing: 8.r),
          itemBuilder: (context, index) {
            return isWebSite
                ? _ItemView(
                    name: websites?[index].name,
                    link: websites?[index].link,
                    websiteCallback: websiteCallback)
                : _ItemView(name: searchHotKeys?[index].name, itemTap: itemTap);
          },
          itemCount:
              isWebSite ? websites?.length ?? 0 : searchHotKeys?.length ?? 0),
    );
  }

  Widget _ItemView(
      {String? name,
      String? link,
      ValueChanged<String>? itemTap,
      WebsiteCallback? websiteCallback}) {
    return GestureDetector(
        onTap: () {
          if (link != null) {
            websiteCallback?.call(name ?? "", link);
            // itemTap?.call(link);
          } else {
            itemTap?.call(name ?? "");
          }
        },
        child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 0.5.w),
                borderRadius: BorderRadius.all(Radius.circular(10.r))),
            child: Text(name ?? "")));
  }
}
